[開発プレビュー版] ストレージバケットの操作インターフェースを提供できる Amplify UI コンポーネント「Storage Browser for S3」がアナウンスされたので使ってみた

[開発プレビュー版] ストレージバケットの操作インターフェースを提供できる Amplify UI コンポーネント「Storage Browser for S3」がアナウンスされたので使ってみた

Clock Icon2024.09.06

いわさです。

今朝「Storage Browser for S3」というものがアナウンスされました。

https://aws.amazon.com/about-aws/whats-new/2024/09/storage-browser-amazon-s3-alpha-release/

こちらはウェブアプリケーションに対して、ユーザーが S3 のデータをダウンロード・アップロードなどを簡単に行うための機能を提供する Amplify UI の開発中のコンポーネントで、React で使うことが出来ます。

ちょうど Amplify + React で 色々と構築・検証を行う機会があり、直近 S3 のブラウジングは特に不要だったのですが、組み込みが簡単だったので試してみました。

実装してみる

本アナウンスの詳細情報や手順は本日時点ではまだ公式ドキュメントには記載されておらず、以下の Issue で導入手順を確認することが出来ます。

https://github.com/aws-amplify/amplify-ui/issues/5731

今回のコンポーネントとは別で既存のストレージ機能を使ってバケットを構成しておきます。

https://docs.amplify.aws/react/build-a-backend/storage/set-up-storage/

/amplify/storage/resource.ts
import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
    name: 'hogeStorage',
    access: (allow) => ({
      'public/*': [
        allow.guest.to(['read']),
        allow.authenticated.to(['read', 'write', 'delete']),
      ],
      'protected/{entity_id}/*': [
        allow.authenticated.to(['read']),
        allow.entity('identity').to(['read', 'write', 'delete'])
      ],
      'private/{entity_id}/*': [
        allow.entity('identity').to(['read', 'write', 'delete'])
      ]
    })
  });

今回の機能は Amplify UI によるものなので、バックエンドリソースは追加の設定は不要です。
Storage Browser コンポーネントを追加でインストールしフロントエンドで使用します。

% npm i --save @aws-amplify/ui-react-storage@storage-browser aws-amplify@storage-browser
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/aws-amplify
npm warn   peer aws-amplify@"^6.3.2" from @aws-amplify/[email protected]
npm warn   node_modules/@aws-amplify/ui
npm warn     @aws-amplify/ui@"6.1.0" from @aws-amplify/[email protected]
npm warn     node_modules/@aws-amplify/ui-react
npm warn     1 more (@aws-amplify/ui-react-core)
npm warn   4 more (@aws-amplify/ui-react, @aws-amplify/ui-react-core, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional aws-amplify@"^6.3.2" from @aws-amplify/[email protected]
npm warn node_modules/@aws-amplify/ui-react
npm warn   @aws-amplify/ui-react@"^6.2.0" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency

added 5 packages, changed 13 packages, and audited 1347 packages in 13s

166 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
%
/src/App.tsx
import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { useEffect, useState } from "react";
import { StorageBrowser } from '@aws-amplify/ui-react-storage';

const client = generateClient<Schema>();

function App() {
  const defaultPrefixes = [
    'public/',
    (identityId: string) => `protected/${identityId}/`,
    (identityId: string) => `private/${identityId}/`,
  ];

  return (
    <Authenticator>
      {({ signOut }) => (
        <StorageBrowser defaultPrefixes={defaultPrefixes} />
      )}
    </Authenticator>
  );
}

export default App;

Storage Browser は IAM Identity Center やカスタム認証、デフォルトの Cognito 認証など様々な認証方法がサポートされていますが、本日は Amplify デフォルトの Cognito 認証を使います。
一番簡単です。

動作チェック

上記の実装で既に使えるので、サンドボックス上でストレージのバックエンドリソースがデプロイされていれば後はローカル実行するだけで OK です。

認証かけているのでユーザープール上の適当なユーザーでサインインしましょう。

BBB3ABA1-409C-4B67-AFC7-59EC7E7B3193.png

スタイルがだいぶ崩れていますが、何か表示されました。
バックエンドにデプロイされた S3 バケットが参照されている雰囲気です。
最近 Amplify のアップデートでマルチバケットがサポートされていた気がしますが、今回特にバケットの指定をしていないですね。そのあたりの指定方法が気になります。

7EC72F1D-63D1-42EC-A69D-A0B9DE4D50E0_1_105_c.jpeg

上記を見てみるとプレフィックスまで表示されていますが、実際には S3 バケット上にまだオブジェクトは存在しません。

1E3BA1AC-B330-4CF8-8C00-70774EAB929F_1_105_c.jpeg

アップロードしてみる

何か適当なオブジェクトをアップロードしてみたいと思います。
Public フォルダに移動し、「Upload Files」からアップロードを行います。
このあたりの UI のカスタマイズ方法(例えば日本語化)も気になりますね。

489D3DB6-5B96-4A91-845F-9918A3CFFD98.png

ローカルから適当なファイルを指定してアップロードしてみました。
ちなみに Start ボタンを押すまでアップロードされません。

0685D9DF-8AD8-41DD-B3C1-44FAAC755C22.png

Start ボタンを押すとアップロードが開始されました。
アップロード状況は Progress で確認することが出来ます。

8D92EC83-9D04-45EA-B4C7-A81005713CBA.png

S3 バケット側を確認してみるとオブジェクトがアップロードされていることが確認出来ました。特に難しい設定はしておらずフロントエンド側で Amplify UI コンポーネントを配置しただけですが、ユーザーが S3 バケット内で色々操作することが出来ていますね。

AD7EB3A3-99FE-42E3-8064-7ABCF44C9BF5.png

別ユーザーでオブジェクトを確認してみる

先ほどのユーザーに Public と Private のプレフィックスが存在していました。
フロントエンドでプレフィックスを指定しているのですが Private についてはユーザーの情報を使用しています。

別のユーザーでサインインしてみると、先程のユーザーのプレフィックス内は確認することが出来ませんでした。

752936D9-A16D-4E71-BD8A-EF6FDEC99C6E.png

逆に自分の Private プレフィックス内にオブジェクトをアップロードしてみましょう。

E645F35B-321E-4547-9994-294D49D4C615_1_105_c.jpeg

無事アップロード出来たのですが、バケット内のオブジェクトは次のように Public が共通、Private がユーザー別に格納される形になっています。

% aws s3 ls s3://amplify-amplifyvitereactt-hogestoragebucket4cb73b1-wm01thkhv2uj --recursive
2024-09-06 13:44:55       7815 private/ap-northeast-1:8036753d-d02b-c516-fd1c-391b39c833e2/bbb.xml
2024-09-06 13:28:01       7815 private/ap-northeast-1:8036753d-d06a-c0fb-00c8-533d41a53432/iwasaaws1-68286-metadata.xml
2024-09-06 13:26:41       7815 public/iwasaaws1-68286-metadata.xml

上記はフロントエンドのプレフィックスで identityId などを活用しているのでカスタマイズが可能ですね。

さいごに

本日はストレージバケットの操作インターフェースを提供できる Amplify UI コンポーネント「Storage Browser for S3」がアナウンスされたので使ってみました。

まるっと機能を提供してくれますがどこまでカスタマイズできるかも気になりますね。もう少し色々試してみようかな。

みなさんも試してみて何か気付いた点や欲しい機能などがあれば冒頭の Issue でフィードバックしましょう。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.